<template>
  <el-scrollbar class="cpc-list-menu">
    <el-menu
      v-if="datas.length"
      v-bind="navMenu.props"
      :default-active="navMenu.activeIndex"
      @select="$emit('select', $event)"
    >
      <menuChild :lists="datas"></menuChild>
    </el-menu>
    <div v-else class="no-data">暂无数据</div>
  </el-scrollbar>
</template>
<script lang="ts">
import { ref, reactive, defineComponent } from 'vue'
import { useRoute } from "vue-router";
import menuChild from './menuChild.vue'
export default defineComponent({
  name: 'cpcMenu',
  components: { menuChild },
  props: {
    navMenu: {
      type: Object,
      default: {
        activeIndex: "/",
        props: {
          router: false,
          mode: "horizontal",
          backgroundColor: "#303030",
          textColor: "#999",
          activeTextColor: "#0F62FE",
        }
      }
    },
    datas: {
      type: Array,
      default: () => [
        {
          id: "/",
          title: "首页"
        }
      ]
    }
  },
  setup: () => {
    return {}
  }
})
</script>

<style lang="less">
  .no-data{
    position:absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
  }
</style>
